<template>
    <el-card class="el-card-div">
        <el-row>
            <el-col :span="24">
                <el-carousel trigger="click" height="200px" :interval=5000 indicator-position="none" :autoplay=false>
                    <el-carousel-item v-for="item in productInfo.picture_urls" :key="item">
                        <h3 text="item">{{ item }}</h3>
                    </el-carousel-item>
                </el-carousel>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="16" title="商品所属分类" class="el-card-row-col-text">
                {{ TypeMap.get(productInfo.category) }}
            </el-col>
            <el-col :span="8" class="row-col">
                <el-button type="primary" text class="row-col-button" @click="toShowProductInfo">
                    查看商品详情
                </el-button>

            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24" :title="productInfo.title" class="el-card-row-col-text">
                {{ productInfo.name }}
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24" :title="productInfo.desc" class="el-card-row-col-text-min">
                {{ productInfo.desc }}
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="21" class="el-card-row-col-text price">
                ￥：{{ productInfo.price }}
            </el-col>
            <el-col :span="3" class="el-card-row-col-text-icon" title="加入购物车" @click="addProduct(productInfo.id)">
                <el-icon color="#FF9402" size="24" class="el-card-row-col-text-icon-svg">
                    <ShoppingTrolley />
                </el-icon>
            </el-col>
        </el-row>
    </el-card>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { HttpMethod } from '@/api/types';
import { TypeMap } from '@/api/typemapping';
import { apiRequest } from '@/api/apiService';
import { AuthService } from '@/api/authService';
import { ref, reactive, defineProps } from 'vue';

const router = useRouter();         // 获取路由实例
const info = defineProps<Props>();  // 接收从外部传入的对象，通过泛型指定类型为 Props 接口定义的类型
const addParam = reactive({         // 列表请求参数
    commodity_id: 0,
    commodity_count: 1
})
interface Props {                   // 定义接收对象的类型接口
    productInfo: {
        id: number;
        name: string;
        category: number;
        title: string;
        desc: string;
        price: number;
        picture_urls: string[];
    };
}

// 添加商品进入购物车
const addProduct = (id: number) => {
    // 判断是否登录
    if (AuthService.getToken() == '') {
        ElMessage({
            message: '请先登录后，再添加购物车！',
            type: 'error',
        })
    } else {
        addParam.commodity_id = id;
        toAddProduct();
    }
};

// 跳转查看商品（带参路由跳转）
const toShowProductInfo = () => {
    const pid = info.productInfo.id.toString();
    router.push({ name: 'productDetail', params: { id: pid } });
}

// 发送加入购物车请求
const toAddProduct = async () => {
    try {
        const url = '/cart/';
        const customHeaders = { 'Authorization': AuthService.getToken() };
        await apiRequest.request<any>(HttpMethod.POST, url, addParam, customHeaders);
        ElMessage({
            message: '商品：' + info.productInfo.name + '添加购物车成功！',
            type: 'success',
        })
    } catch (error) {
        console.log('request: /api/cart/ failed, error message: ', error);
    }
};
</script>

<style scoped>
.row-col {
    text-align: right;
}

.row-col-button {
    padding: 0px;
}

.el-card-div {
    max-width: 16vw;
    width: 16vw;
    min-width: 270px;
    margin: 20px 1.5vw;
    border-radius: 10px;
    transition: all 0.3s ease;
    /* 添加过渡效果，使变化更平滑 */
}

.el-card-div:hover {
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(92, 175, 144, 0.5);
    /* 水平偏移0，垂直偏移0，模糊半径10px，阴影颜色为半透明黑色 */
    border: 1px solid rgb(92, 175, 144);
    /* 边框宽度2px，样式为实线，颜色为红色 */
}

.el-carousel_indicators {
    display: none;
}

.el-card-row-col-text {
    line-height: 24px;
    font-size: 14px;
    -webkit-user-select: none;
    /* 适用于Chrome、Safari等浏览器 */
    -moz-user-select: none;
    /* 适用于Firefox浏览器 */
    -ms-user-select: none;
    /* 适用于IE浏览器 */
    user-select: none;
    /* 标准语法，适用于现代浏览器 */
}

.el-card-row-col-text-min {
    line-height: 24px;
    font-size: 12px;
    color: #C0C0C0;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-user-select: none;
    /* 适用于Chrome、Safari等浏览器 */
    -moz-user-select: none;
    /* 适用于Firefox浏览器 */
    -ms-user-select: none;
    /* 适用于IE浏览器 */
    user-select: none;
    /* 标准语法，适用于现代浏览器 */
}

.el-card-row-col-text-icon {
    text-align: right;
    line-height: 24px;
    cursor: pointer;
}

.el-card-row-col-text-icon-svg {
    margin-top: 2px;
}

.el-card-row-col-text-icon-svg:active {
    background-color: #FFB624;
}

.price {
    color: #FF4900;
}
</style>
